<template>
  <div :class="{'has-logo':showLogo}">
    <logo v-if="showLogo" :collapse="isCollapse" />
    <!-- 滚动条容器 -->
    <el-scrollbar wrap-class="scrollbar-wrapper">
      <!-- 菜单组件 -->
      <el-menu
        :default-active="activeMenu"
        :background-color="variables.menuBg"
        :text-color="variables.menuText"
        :active-text-color="variables.theme"
        :unique-opened="true"
        :collapse-transition="true"
        :collapse="isCollapse"
        mode="vertical"
      >
        <!-- 左侧导航item -->
        <sidebar-item
            v-for="(menu, index) in menus"
            :key="menu.path + index"
            :item="menu"
            :base-path="menu.path"
        />
      </el-menu>
    </el-scrollbar>
  </div>
</template>

<script>
import SidebarItem from './Item'
import variables from "@/utils/css/var.scss";
import { mapGetters, mapState } from "vuex";

export default {
  name: 'Sidebar',
  components: {
    SidebarItem
  },
  computed: {
    ...mapState({
      // 是否展开判断
      isCollapse: state => !state.layout.sidebar.opened
    }),
    ...mapGetters(["menus"]),
    showLogo() {
      // return this.$store.state.settings.sidebarLogo;
      return null;
    },
    variables() {
      return variables;
    },
    // 当前显示的菜单
    activeMenu() { // 根据页面的url配置展开路径
      return this.$route.path;
    },
  },
  mounted() {
    // console.log(this.menus);
  },
  methods: {
  },
};
</script>
